<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide><img src="../../../assets/images/3f5ff03fa0c024b930f515e63ae2c702.jpg_945x288_7dff4510.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="../../../assets/images/b72df47942fb28fcd7bf481f01e785f5.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="../../../assets/images/a685001bbf5e77a203ff8815e953efbe.jpg_945x288_52b6ec01.jpg" alt=""></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'swipe',
  data () {
    return {
      swiperOption: {
        // 显示轮播下标远点
        pagination: {
          el: '.swiper-pagination'
        },
        // 循环轮播
        loop: true
      }
    }
  },
  props: ['swiperList']
}
</script>

<style lang="stylus" scoped>
  /*渗透当前组件下所有包括 swiper-pagination-bullet-active(子组件) 的设置为白色*/
  .wrapper >>> .swiper-pagination-bullet-active
    background-color: #fff
  .swiper-container
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
  img
    width:100%
</style>
<!--<style>-->
<!--.swiper-pagination-bullet-active {-->
<!--background-color: #fff-->
<!--}-->
<!--</style>-->
